
<template>
  <el-form :model="formData" ref="elFormRef" :rules="rule" label-position="left" label-width="80px" size="large">
    <div class="card-container">
      <el-form-item>
        <el-button type="primary" @click="exportWord">导出</el-button>
      </el-form-item>
      <el-card style="{width: 100% !important}" shadow="never">
        <div slot="header" class="clear-fix">
          <span>故障档案录入</span>
          <i class="float-right el-icon-arrow-down"></i>
        </div>
        <el-row>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="飞机型号MODEL" label-width="200px" prop="aircraft_model"
              class="required label-center-align">
              <el-select v-model="formData.aircraft_model" class="full-width-input" clearable>
                <el-option v-for="(item, index) in aircraft_modelOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="编号Number" label-width="150px" prop="number"
              class="required label-center-align">
              <el-input v-model="formData.number" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="排故日期:" label-width="150px" prop="troubleshooting_date">
              <el-date-picker v-model="formData.troubleshooting_date" type="date" placeholder="选择日期" :clearable="true"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="制造序列号" label-width="150px" prop="manufacturing_serial_number"
              class="required label-center-align">
              <el-input v-model="formData.manufacturing_serial_number" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="故障对应的工艺设计文件号" label-width="200px" prop="process_design_document_number"
              class="required label-center-align">
              <el-input v-model="formData.process_design_document_number" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="故障对应的工艺设计文件名" label-width="200px" prop="process_design_document_name"
              class="label-center-align">
              <el-input v-model="formData.process_design_document_name" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="负责工艺员" label-width="150px" prop="responsible_craftman"
              class="required label-center-align">
              <el-input v-model="formData.responsible_craftman" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="负责工艺员工号" label-width="120px" prop="responsible_craftman_number"
              class="required label-center-align">
              <el-input v-model="formData.responsible_craftman_number" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="故障对应的工程文件" label-width="150px" prop="fault_project_file"
              class="label-center-align">
              <el-input v-model="formData.fault_project_file" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="ATA章节（一级）" label-width="150px" prop="ata_chapter_level1"
              class="required label-center-align">
              <el-input v-model="formData.ata_chapter_level1" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="ATA章节（二级）" label-width="150px" prop="ata_chapter_level2"
              class="required label-center-align">
              <el-input v-model="formData.ata_chapter_level2" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="grid-cell">
            <el-form-item label="ATA章标题名称" label-width="150px" prop="ata_chapter_name"
              class="label-center-align">
              <el-input v-model="formData.ata_chapter_name" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="设计要求的操作和响应" label-width="150px"
          prop="operation_and_response_to_design_requirements" class="label-center-align">
          <el-input type="textarea" v-model="formData.operation_and_response_to_design_requirements"
            rows="10"></el-input>
        </el-form-item>
        <el-form-item label="故障名称" label-width="150px" prop="fault_name" class="label-center-align">
          <el-input v-model="formData.fault_name" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="故障描述" label-width="150px" prop="fault_description"
          class="required label-center-align">
          <el-input v-model="formData.fault_description" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="故障原理" label-width="150px" prop="fault_principle" class="label-center-align">
          <el-input type="textarea" v-model="formData.fault_principle" rows="10"></el-input>
        </el-form-item>
        <el-form-item label="排故思路" label-width="150px" prop="troubleshooting_ideas"
          class="label-center-align">
          <el-input type="textarea" v-model="formData.troubleshooting_ideas" rows="10"></el-input>
        </el-form-item>
        <div class="card-container">
          <el-card style="{width: 100% !important}" shadow="never">
            <div slot="header" class="clear-fix">
              <span>故障类型</span>
              <i class="float-right el-icon-arrow-down"></i>
            </div>
            <div class="tab-container">
              <el-tabs v-model="faultTypeActiveTab" type="border-card">
                <el-tab-pane name="tab1" label="线路故障">
                  <el-form-item label="是否有线路故障" label-width="150px" prop="is_line_fault"
                    class="label-center-align">
                    <el-switch v-model="formData.is_line_fault"></el-switch>
                  </el-form-item>
                  <div class="card-container" v-if="formData.is_line_fault">
                    <el-card style="{width: 100% !important}" shadow="never">
                      <div slot="header" class="clear-fix">
                        <span></span>
                      </div>
                      <el-row>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="连接器(从)" label-width="150px" prop="line_fault_connector_from"
                            class="label-center-align">
                            <el-input v-model="formData.line_fault_connector_from" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="连接器(到)" label-width="150px" prop="line_fault_connector_to"
                            class="label-center-align">
                            <el-input v-model="formData.line_fault_connector_to" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="针孔号(从)" label-width="150px" prop="line_fault_pinhole_from"
                            class="label-center-align">
                            <el-input v-model="formData.line_fault_pinhole_from" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="针孔号（到）" label-width="150px" prop="line_fault_pinhole_to"
                            class="label-center-align">
                            <el-input v-model="formData.line_fault_pinhole_to" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-form-item label="人工操作" prop="line_fault_operation" class="label-center-align">
                        <el-input type="textarea" v-model="formData.line_fault_operation" rows="3"></el-input>
                      </el-form-item>
                      <el-form-item label="测试结果" prop="line_fault_result" class="label-center-align">
                        <el-input type="textarea" v-model="formData.line_fault_result" rows="3"></el-input>
                      </el-form-item>
                      <el-form-item label="章节" prop="line_fault_chapter" class="label-center-align">
                        <el-input v-model="formData.line_fault_chapter" type="text" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="备注" prop="line_fault_note" class="label-center-align">
                        <el-input type="textarea" v-model="formData.line_fault_note" rows="3"></el-input>
                      </el-form-item>
                    </el-card>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="tab-pane-40319" label="设备故障">
                  <el-form-item label="是否有设备故障" label-width="150px" prop="is_equipment_fault"
                    class="label-center-align">
                    <el-switch v-model="formData.is_equipment_fault"></el-switch>
                  </el-form-item>
                  <div class="card-container" v-if="formData.is_equipment_fault">
                    <el-card style="{width: 100% !important}" shadow="never">
                      <div slot="header" class="clear-fix">
                        <span></span>
                      </div>
                      <el-row>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="设备编号" prop="equipment_fault_number" class="label-center-align">
                            <el-input v-model="formData.equipment_fault_number" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="设备名称" prop="equipment_fault_name" class="label-center-align">
                            <el-input v-model="formData.equipment_fault_name" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="供应商零件标准号" label-width="150px"
                            prop="equipment_fault_component_number" class="label-center-align">
                            <el-input v-model="formData.equipment_fault_component_number" type="text"
                              clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="设备安装图号" label-width="150px"
                            prop="equipment_fault_install_number" class="label-center-align">
                            <el-input v-model="formData.equipment_fault_install_number" type="text" clearable>
                            </el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-form-item label="章节" prop="equipment_fault_chapter" class="label-center-align">
                        <el-input v-model="formData.equipment_fault_chapter" type="text" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="备注" prop="equipment_fault_note" class="label-center-align">
                        <el-input type="textarea" v-model="formData.equipment_fault_note" rows="3"></el-input>
                      </el-form-item>
                    </el-card>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="tab-pane-16953" label="前置条件">
                  <el-form-item label="是否有前置条件" label-width="150px" prop="is_pre_factor"
                    class="label-center-align">
                    <el-switch v-model="formData.is_pre_factor"></el-switch>
                  </el-form-item>
                  <div class="card-container" v-if="formData.is_pre_factor">
                    <el-card style="{width: 100% !important}" shadow="never">
                      <div slot="header" class="clear-fix">
                        <span></span>
                      </div>
                      <el-row>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="文件号" prop="pre_factor_number" class="label-center-align">
                            <el-input v-model="formData.pre_factor_number" type="text" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="文件名称" prop="pre_factor_name" class="label-center-align">
                            <el-input v-model="formData.pre_factor_name" type="text" clearable></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-form-item label="闲置内容" prop="pre_factor_content" class="label-center-align">
                        <el-input type="textarea" v-model="formData.pre_factor_content" rows="3"></el-input>
                      </el-form-item>
                      <el-form-item label="备注" prop="pre_factor_note" class="label-center-align">
                        <el-input type="textarea" v-model="formData.pre_factor_note" rows="3"></el-input>
                      </el-form-item>
                    </el-card>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="tab-pane-31057" label="人为因素">
                  <el-form-item label="是否有人为因素" label-width="150px" prop="is_human_factor"
                    class="label-center-align">
                    <el-switch v-model="formData.is_human_factor"></el-switch>
                  </el-form-item>
                  <div class="card-container" v-if="formData.is_human_factor">
                    <el-card style="{width: 100% !important}" shadow="never">
                      <div slot="header" class="clear-fix">
                        <span></span>
                      </div>
                      <el-form-item label="人为因素具体内容" label-width="150px" prop="human_factor_context"
                        class="label-center-align">
                        <el-input type="textarea" v-model="formData.human_factor_context" rows="3"></el-input>
                      </el-form-item>
                    </el-card>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-card>
        </div>
        <el-form-item label="故障隔离步骤" label-width="150px" prop="fault_isolation_steps"
          class="label-center-align">
          <el-input type="textarea" v-model="formData.fault_isolation_steps" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="参考资料" label-width="150px" prop="reference" class="label-center-align">
          <el-input type="textarea" v-model="formData.reference" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="DISR号" label-width="150px" prop="dISR_number" class="label-center-align">
          <el-input v-model="formData.dISR_number" type="text" clearable></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="序号" prop="serial_number1" class="label-center-align">
              <el-input v-model="formData.serial_number1" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="是否需要质量检测" label-width="200px" prop="is_quality_inspection_required1"
              class="label-center-align">
              <el-switch v-model="formData.is_quality_inspection_required1"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检查或操作描述" label-width="120px" prop="operation_description1"
          class="label-center-align" clearable>
          <el-input type="textarea" v-model="formData.operation_description1" rows="3"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="序号" prop="serial_number2" class="label-center-align">
              <el-input v-model="formData.serial_number2" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="是否需要质量检测" label-width="200px" prop="is_quality_inspection_required2"
              class="label-center-align">
              <el-switch v-model="formData.is_quality_inspection_required2"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检查或操作描述" label-width="120px" prop="operation_description2"
          class="label-center-align" clearable>
          <el-input type="textarea" v-model="formData.operation_description2" rows="3"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="序号" prop="serial_number3" class="label-center-align">
              <el-input v-model="formData.serial_number3" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="是否需要质量检测" label-width="200px" prop="is_quality_inspection_required3"
              class="label-center-align">
              <el-switch v-model="formData.is_quality_inspection_required3"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检查或操作描述" label-width="120px" prop="operation_description3"
          class="label-center-align" clearable>
          <el-input type="textarea" v-model="formData.operation_description3" rows="3"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="序号" prop="serial_number4" class="label-center-align">
              <el-input v-model="formData.serial_number4" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="是否需要质量检测" label-width="200px" prop="is_quality_inspection_required4"
              class="label-center-align">
              <el-switch v-model="formData.is_quality_inspection_required4"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检查或操作描述" label-width="120px" prop="operation_description4"
          class="label-center-align" clearable>
          <el-input type="textarea" v-model="formData.operation_description4" rows="3"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="序号" prop="serial_number5" class="label-center-align">
              <el-input v-model="formData.serial_number5" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="是否需要质量检测" label-width="200px" prop="is_quality_inspection_required5"
              class="label-center-align">
              <el-switch v-model="formData.is_quality_inspection_required5"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检查或操作描述" label-width="120px" prop="operation_description5"
          class="label-center-align" clearable>
          <el-input type="textarea" v-model="formData.operation_description5" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="结论录入" label-width="150px" prop="conclusion" class="required label-center-align">
          <el-input type="textarea" v-model="formData.conclusion" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="DI-SR/FRR序号" label-width="150px" prop="frr_number" class="label-center-align">
          <el-input v-model="formData.frr_number" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="纠正措施" label-width="150px" prop="corrective_ction" class="label-center-align">
          <el-input type="textarea" v-model="formData.corrective_ction" rows="3"></el-input>
        </el-form-item>
      </el-card>
    </div>

    <div class="card-container">
      <el-card style="{width: 100% !important}" shadow="never">
        <div slot="header" class="clear-fix">
          <span style="font-size: 30px;font-weight: bold;">图片上传模块</span>
          <i class="float-right el-icon-arrow-down"></i>
        </div>
        <div v-loading.fullscreen.lock="fullscreenLoading">
          <div class="gva-table-box">
            <warning-bar
              title="附件上传"
            />
            <div class="gva-btn-list">
              <upload-image
                v-model:imageUrl="imageUrl"
                :file-size="512"
                :max-w-h="1080"
                :ateremark="search.keyword"
                class="upload-btn"
                @on-success="getTableData"
              />
      
              <!-- <el-form ref="searchForm" :inline="true" :model="search">
                <el-form-item label="">
                  <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
                </el-form-item>
      
                <el-form-item>
                  <el-button type="primary" icon="search" @click="getTableData">查询</el-button>
                </el-form-item>
              </el-form> -->
      
            </div>
      
              <el-table :data="tableData">
                <el-table-column align="left" label="预览" width="400">
                  <template #default="scope">
                    <CustomPic pic-type="file" :pic-src="scope.row.url" />
                  </template>
                </el-table-column>
                <el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
                  <template #default="scope">
                    <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
                  </template>
                </el-table-column>
                <!-- <el-table-column align="left" label="文件名/备注" prop="name" width="180">
                  <template #default="scope">
                    <div class="name" @click="editFileNameFunc(scope.row)">{{ scope.row.name }}</div>
                  </template>
                </el-table-column> -->
                <!-- <el-table-column align="left" label="链接" prop="url" min-width="300" /> -->
                <el-table-column align="left" label="标签" prop="tag" width="100">
                  <template #default="scope">
                    <el-tag
                      :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
                      disable-transitions
                    >{{ scope.row.tag }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="操作" width="160">
                  <template #default="scope">
                    <el-button icon="download" type="primary" link @click="downloadFile(scope.row)">下载</el-button>
                    <el-button icon="delete" type="primary" link @click="deleteFileFunc(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="gva-pagination">
                <el-pagination
                  :current-page="page"
                  :page-size="pageSize"
                  :page-sizes="[3, 5, 10]"
                  :style="{ float: 'right', padding: '20px' }"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                />
              </div>
            </div>
      
            </div>
  
      </el-card>
      </div>
  
    <div class="card-container">
      <el-card style="{width: 100% !important}" shadow="never">
        <div slot="header" class="clear-fix">
          <span style="font-size: 30px;font-weight: bold;">故障树绘制模块</span>
          <i class="float-right el-icon-arrow-down"></i>
        </div>
          <Diagram ref="DiagramInstance" @DiagramData="handleDiagramData" :DiagramData="DiagramData_init" />
  
      </el-card>
    </div>

    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="back">返回</el-button>
    </el-form-item>
  </el-form>
  
</template>



<script>
export default {
  name: 'MergeForm_struct'
}
</script>

<script setup>
// logicflow start
import Diagram from "../logicflow/Diagram.vue"
// logicflow end
// 图片上传
import { getFileList, deleteFile, editFileName } from '@/api/fileUploadAndDownload'
import { downloadImage } from '@/utils/downloadImg'
import CustomPic from '@/components/customPic/index.vue'
import UploadImage from '@/components/upload/image.vue'
import UploadCommon from '@/components/upload/common.vue'
import { formatDate } from '@/utils/format'
import WarningBar from '@/components/warningBar/warningBar.vue'

import { ElMessageBox } from 'element-plus'


// 图片上传 end

import {
  createMergeForm_struct,
  updateMergeForm_struct,
  findMergeForm_struct
} from '@/api/sys_mergeForm'

// 自动获取字典

import { getDictFunc } from '@/utils/format'
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
// 图片上传
const path = ref(import.meta.env.VITE_BASE_API)

const imageUrl = ref('')
const imageCommon = ref('')

const page = ref(1)
const total = ref(0)
const pageSize = ref(3)
const search = ref({keyword:'ateateate'})
const tableData = ref([])

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async() => {

  console.log("ate log tableData",tableData)
  const table = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}
getTableData()

const deleteFileFunc = async(row) => {
  ElMessageBox.confirm('此操作将永久删除文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async() => {
      const res = await deleteFile(row)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功!',
        })
        if (tableData.value.length === 1 && page.value > 1) {
          page.value--
        }
        getTableData()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const downloadFile = (row) => {
  if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
    console.log("ate download1",row.url)
    downloadImage(row.url, row.name)
  
  } else {
  
    downloadImage(path.value + '/' + row.url, row.name)
    console.log("ate download2",path.value + '/' + row.url)
  
  }
}

/**
 * 编辑文件名或者备注
 * @param row
 * @returns {Promise<void>}
 */
const editFileNameFunc = async(row) => {
  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '不能为空',
    inputValue: row.name
  }).then(async({ value }) => {
    row.name = value
    console.log("ate log row picture",row)
    const res = await editFileName(row)
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '编辑成功!',
      })
      getTableData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消修改'
    })
  })
}
  // 图片end
const route = useRoute()
const router = useRouter()

const type = ref('')
const formData = ref({
            aircraft_model: '',
            number: 'PG-SYB-000001',
            troubleshooting_date: new Date(),
            manufacturing_serial_number: '',
            process_design_document_number: '',
            process_design_document_name: '',
            responsible_craftman: '',
            responsible_craftman_number: '',
            fault_project_file: '',
            ata_chapter_level1: '',
            ata_chapter_level2: '',
            ata_chapter_name: '',
            operation_and_response_to_design_requirements: '',
            fault_name: '',
            fault_description: '',
            fault_principle: '',
            troubleshooting_ideas: '',
            fault_isolation_steps: '',
            reference: '',
            dISR_number: '',
            serial_number1: '',
            operation_description1: '',
            is_quality_inspection_required1: false,
            serial_number2: '',
            operation_description2: '',
            is_quality_inspection_required2: false,
            serial_number3: '',
            operation_description3: '',
            is_quality_inspection_required3: false,
            serial_number4: '',
            operation_description4: '',
            is_quality_inspection_required4: false,
            serial_number5: '',
            operation_description5: '',
            is_quality_inspection_required5: false,
            upload_troubleshooting_form: '',
            upload_attachment: '',
            upload_fault_tree: '',
            conclusion: '',
            complete_date: new Date(),
            is_passed: false,
            frr_number: '',
            corrective_ction: '',
            is_line_fault: false,
            line_fault_connector_from: '',
            line_fault_pinhole_from: '',
            line_fault_operation: '',
            line_fault_connector_to: '',
            line_fault_pinhole_to: '',
            line_fault_result: '',
            line_fault_chapter: '',
            line_fault_note: '',
            is_equipment_fault: false,
            equipment_fault_number: '',
            equipment_fault_name: '',
            equipment_fault_component_number: '',
            equipment_fault_install_number: '',
            equipment_fault_chapter: '',
            equipment_fault_note: '',
            is_pre_factor: false,
            pre_factor_number: '',
            pre_factor_name: '',
            pre_factor_content: '',
            pre_factor_note: '',
            is_human_factor: false,
            human_factor_context: '',
        })
// 验证规则
const rule = reactive({
          aircraft_model: [{
            required: true,
            message: '字段值不可为空',
          }],
          number: [{
            required: true,
            message: '字段值不可为空',
          }],
          troubleshooting_date: [{
            required: true,
            message: '字段值不可为空',
          }],
          manufacturing_serial_number: [{
            required: true,
            message: '字段值不可为空',
          }],
          process_design_document_number: [{
            required: true,
            message: '字段值不可为空',
          }],
          responsible_craftman: [{
            required: true,
            message: '字段值不可为空',
          }],
          responsible_craftman_number: [{
            required: true,
            message: '字段值不可为空',
          }],
          ata_chapter_level1: [{
            required: true,
            message: '字段值不可为空',
          }],
          ata_chapter_level2: [{
            required: true,
            message: '字段值不可为空',
          }],
          fault_description: [{
            required: true,
            message: '字段值不可为空',
          }],
          conclusion: [{
            required: true,
            message: '字段值不可为空',
          }],
})

const aircraft_modelOptions = ref([{
          "label": "ARJ21-700",
          "value": 1
        }, {
          "label": "C919",
          "value": "2"
        }])
const faultTypeActiveTab = ref('tab1')
const elFormRef = ref()
const DiagramData_init = ref('')
// 初始化方法
const init = async () => {
 // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (route.query.id) {
      const res = await findMergeForm_struct({ ID: route.query.id })
      search.value['keyword'] = 'merge_table_'+route.query.id.toString()
      if (res.code === 0) {
        formData.value = res.data.reMF
        type.value = 'update'
      }
    } else {
      type.value = 'create'
    }
    getTableData()
    DiagramData_init.value = formData.value.upload_fault_tree
}

init()

const handleDiagramData = (data)=>{
  console.log("ate",data)
  formData.value.upload_fault_tree = data

}
// DiagramInstance.value.updateDiagramData()
const DiagramInstance = ref(null)

// 保存按钮
const save = async() => {
      DiagramInstance.value.sendDiagramData()
      elFormRef.value?.validate( async (valid) => {
         if (!valid) return
            let res
           switch (type.value) {
             case 'create':
               res = await createMergeForm_struct(formData.value)
               break
             case 'update':
               res = await updateMergeForm_struct(formData.value)
               break
             default:
               res = await createMergeForm_struct(formData.value)
               break
           }
           if (res.code === 0) {
             ElMessage({
               type: 'success',
               message: '创建/更改成功'
             })
           }
       })
}

// 返回按钮
const back = () => {
    router.go(-1)
}

const exportWord=async()=> {
  JSZipUtils.getBinaryContent('/api/uploads/file/export2.docx', function (error, content) {
    // 抛出异常
    if (error) {
      console.log('b')
      throw error
    }
    // 创建一个JSZip实例，内容为模板的内容
    let zip = new JSZip(content)
    // 创建并加载docxtemplater实例对象
    let doc = new Docxtemplater().loadZip(zip)
    // 设置模板变量的值
    if (formData.value.aircraft_model == 1) {
      formData.value.aircraft_model = 'ARJ21-700'
    } else {
      formData.value.aircraft_model = 'C919'
    }
    console.log(formData.value.aircraft_model)
    if (formData.value.operation_description1==undefined || formData.value.operation_description1==''||formData.value.operation_description1==null||formData.value.operation_description1==" "){
      formData.value.operation_description1 = ' '
      formData.value.is_quality_inspection_required1 = ' '
    }else{
      if (formData.value.is_quality_inspection_required1 ==true){
        formData.value.is_quality_inspection_required1 = "是"
      }else{
        formData.value.is_quality_inspection_required1 = "否"
      }
    }
    if (formData.value.operation_description2==undefined||formData.value.operation_description2==''||formData.value.operation_description2==null||formData.value.operation_description2==" "){
      formData.value.operation_description2 = ' '
      formData.value.is_quality_inspection_required2 = ' '
    }else{
      if (formData.value.is_quality_inspection_required2 ==true){
        formData.value.is_quality_inspection_required2 = "是"
      }else{
        formData.value.is_quality_inspection_required2 = "否"
      }
    }
    if (formData.value.operation_description3==undefined||formData.value.operation_description3==''||formData.value.operation_description3==null||formData.value.operation_description3==" "){
      formData.value.operation_description3 = ' '
      formData.value.is_quality_inspection_required3 = ' '
    }else{
      if (formData.value.is_quality_inspection_required3 ==true){
        formData.value.is_quality_inspection_required3 = "是"
      }else{
        formData.value.is_quality_inspection_required3 = "否"
      }
    }
    if (formData.value.operation_description4==undefined||formData.value.operation_description4==''||formData.value.operation_description4==null||formData.value.operation_description4==" "){
      formData.value.operation_description4 = ' '
      formData.value.is_quality_inspection_required4 = ' '
    }else{
      if (formData.value.is_quality_inspection_required4 ==true){
        formData.value.is_quality_inspection_required4 = "是"
      }else{
        formData.value.is_quality_inspection_required4 = "否"
      }
    }

    if (formData.value.operation_description5==undefined||formData.value.operation_description5==''||formData.value.operation_description5==null||formData.value.operation_description5==" "){
      formData.value.operation_description5 = ' '
      formData.value.is_quality_inspection_required5 = ' '
    }else{
      if (formData.value.is_quality_inspection_required5 ==true){
        formData.value.is_quality_inspection_required5 = "是"
      }else{
        formData.value.is_quality_inspection_required5 = "否"
      }
    }
             

    console.log("ate",formData.value)
    doc.setData({
      ...formData.value,
    })
    try {
      // 用模板变量的值替换所有模板变量
      doc.render()
    } catch (error) {
   
      this.$message.error('导出报表失败')
      throw error
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    let out = doc.getZip().generate({
      type: 'blob',
      mimeType:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, '机上功能试验排故过程记录表.docx')
  })
}

</script>



<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }
  
  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }
    
    .el-rate {
      margin-top: 8px;
    }
  }
  
  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }
    
    .el-rate {
      margin-top: 6px;
    }
  }
  
  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }
    
    .el-rate {
      margin-top: 4px;
    }
  }
  
  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }
  
  .clear-fix:after {
    clear: both;
  }
  
  .float-right {
    float: right;
  }
  
</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  
  div.tab-container {}
  
  .label-left-align ::v-deep .el-form-item__label {
    text-align: left;
  }
  
  .label-center-align ::v-deep .el-form-item__label {
    text-align: center;
  }
  
  .label-right-align ::v-deep .el-form-item__label {
    text-align: right;
  }
  
  .custom-label {}
  
  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
      margin: 0;
    }
  }
  
</style>